<div fxLayout="row wrap" ngClass.lt-md="mobile-padding" fxLayoutAlign="center" class="white">
  <div fxFlex="1 1 25%" fxFlex.lt-md="1 1 100%">
    <ul class="pricing p-blue">
      <li style="background: #42A5F5;font-size: 32px;padding: 5px;font-family: 'Roboto Light';font-weight: 200;color: white;">
        Free
      </li>
      <li>Only public projects</li>
      <li>Best effort support</li>
      <li>
        <h3>Free</h3>
        <span>until first 100k requests</span>
      </li>
      <li *ngIf="!ss.getToken()">
        <button (click)="register()">Join Now</button>
      </li>
    </ul>
  </div>
  <div fxHide.lt-md fxFlex="1 1 5%"></div>
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 25%">
    <ul class="pricing p-green">
      <li style="background: #66BB6A;font-size: 32px;padding: 5px;font-family: 'Roboto Light';font-weight: 200;color: white;">
        Premium
      </li>
      <li>Public and private projects</li>
      <li>Priority support</li>
      <li>
        <h3>$9</h3>
        <span>per 100k requests</span>
      </li>
      <li>
        <button *ngIf="!ss.getToken()" (click)="openCheckout()">Join Now</button>
        <button *ngIf="ss.getToken()" (click)="openCheckout()">Go premium</button>
      </li>
    </ul>
  </div>
  <div fxHide.lt-md fxFlex="1 1 5%"></div>
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 25%">
    <div style="color: #555">
      <p >
        Earn free credits by helping us with tweets and other goodies.
      </p>
      <p>
        Just shoot us a mail with the links to <a href="mailto:contact@teleport.tech">contact@teleport.tech</a>.
      </p>
    </div>
  </div>
</div>